<template>
  <div class="active-data">
    <div id="mxbActive" ref="echarts" style="width:4.68rem;height:2.66rem"></div>
  </div>
</template>

<script>
import {getUserActive} from 'src/api/api'
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')

export default {
  props: {
    clientHeight: {
      type: String,
      default: ''
    },
    clientWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeData: {
        title: {
          text: '用户活跃数据',
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#e3a500'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['登录人数', '登录两次及以上人数'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true,
              backgroundColor: '#0F1C30'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        series: [{
          name: '登录人数',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [{
                  offset: 0,
                  color: '#00BEE6'
                },
                {
                  offset: 1,
                  color: '#0048FF'
                }
                ]
              )
            }
          },
          barWidth: '20%',
          data: []
        },
        {
          name: '登录两次及以上人数',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: []
        }
        ]
      },
      activeChart: null
    }
  },
  mounted() {
    this._getUserActive()
    // setInterval(() => {
    //   this._getUserActive()
    // }, 5000)
    this.selfAdaption()
  },
  methods: {
    _getUserActive() {
      this.activeChart = echarts.init(document.getElementById('mxbActive'))
      this.activeChart.setOption(this.activeData)
      let activeX = []
      let activeLogin = []
      let activeLoginAgain = []
      getUserActive().then(res => {
        if (res.status === '0') {
          for (let i = 0; i < res.result.data.length; i++) {
            let loginCount = res.result.data[i].loginCount
            let historyLoginCount = res.result.data[i].historyLoginCount
            let date = res.result.data[i].date.substr(res.result.data[i].date.length - 4).slice(0, 2) + '/' +
              res.result.data[i].date.substr(res.result.data[i].date.length - 4).slice(2)
            activeX.push(date)
            activeLogin.push(loginCount)
            activeLoginAgain.push(historyLoginCount)
          }
          this.activeChart.setOption({
            xAxis: {
              data: activeX
            },
            series: [{
              name: '登录人数',
              data: activeLogin
            },
            {
              name: '登录两次及以上人数',
              data: activeLoginAgain
            }
            ]
          })
        }
      })
    },
    selfAdaption () {
      let _this = this
      setTimeout(() => {
        window.addEventListener('resize', function () {
          _this.activeChart.resize()
        })
      }, 10)
    }
  }

}
</script>

<style>

</style>
